<template>
  <Main>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input v-model="formInline.project_name" placeholder="项目名称"></el-input>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="formInline.org_name" placeholder="公司名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetch()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="add()" icon="el-icon-plus" style="display:none;">新建保函</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="kid"
      default-expand-all
      @sort-change="sortChange"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column fixed prop="project_name" label="项目名称" sortable="custom"></el-table-column>
      <el-table-column prop="org_name" label="公司名称" sortable="custom"></el-table-column>
      <el-table-column prop="link_man" label="联系人"></el-table-column>
      <el-table-column prop="link_phone" label="联系电话"></el-table-column>
      <el-table-column prop="type" label="保函类型" sortable="custom"></el-table-column>
      <el-table-column prop="created" label="提交时间" sortable="custom" :formatter="dateFormatter"></el-table-column>
      <el-table-column prop="cp_money" label="代办费用"></el-table-column>
      <el-table-column prop="info_upload" label="线下信息提交"></el-table-column>
      <el-table-column prop="backletter_money" label="尾款"></el-table-column>
      <el-table-column prop="statuz" label="状态" sortable="custom"></el-table-column>
      <el-table-column fixed="right" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button type="primary" @click="detail(scope.row.kid)">
            <i class="el-icon-search"></i>查看
          </el-button>
          <!-- <el-button
            type="primary"
            @click="edit(scope.row.kid)"
            v-if="scope.row.statuz==null && scope.row.statuz!='申请失败'"
          >
            <i class="el-icon-upload2"></i>上传
          </el-button>-->
          <el-button
            @click="del(scope.row.kid)"
            v-if="scope.row.statuz!='已取消' && scope.row.statuz!='办理完成' "
          >
            <i class="el-icon-delete"></i>取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page
      :page="formInline.page"
      :limit="formInline.limit"
      :total="formInline.total"
      @change="changePage"
    ></page>
    <!-- </div> -->
    <Add ref="Add" @refresh="fetch"></Add>
    <Edit ref="Edit" @refresh="fetch"></Edit>
    <Detail ref="Detail" @refresh="fetch"></Detail>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import { baseUrl } from "@/config/env";
import { dateForm } from "@/util/date";
import Add from "./add";
import Edit from "./edit";
import Detail from "./detail";

const urls = {
  delete: baseUrl + "/zweixin/fk/bl/delete",
  list: baseUrl + "/zweixin/fk/bl/list"
};
export default {
  methods: {
    dateFormatter(row, column) {
      return dateForm(row.created);
    },
    sortChange(column, prop, order) {
      this.formInline.sorter = {
        field: column.prop,
        order: column.order
      };
      this.fetch();
    },
    changePage(val) {
      this.formInline.page = val;
      this.fetch();
    },
    add: function() {
      this.$refs.Add.show();
    },
    detail: function(kid) {
      this.$refs.Detail.show(kid);
    },
    edit: function(kid) {
      this.$refs.Edit.show(kid);
    },
    del: function(kid) {
      this.$confirm("确认要取消该保函吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.delete, { params: { kid: kid } }).then(res => {
          this.$message(res.data.result);
          this.fetch();
        });
      });
    },
    fetch() {
      axios.get(urls.list, { params: this.formInline }).then(res => {
        const data = res.data.result;
        this.tableData = data.list;
        this.formInline.page = data.pageNumber;
        this.formInline.limit = data.pageSize;
        this.formInline.total = data.totalRow;
      });
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        project_name: null,
        org_name: null,
        limit: 10,
        page: 1,
        total: 0,
        sorter: {}
      },
      tableData: []
    };
  },
  components: {
    Add,
    Edit,
    Detail,
    Main,
    page
  }
};
</script>
